$(function () {
  // 1.1 获取裁剪区域的 DOM 元素
  let $image = $('#image')
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview',
  }

  // 1.3 创建裁剪区域
  $image.cropper(options)

  $('#uploadFile').click(function () {
    $('#file').click()
  })

  const layer = layui.layer

  $('#file').change(function (e) {
    let filelength = e.target.files.length
    if (filelength === 0) return layer.msg('请选择图片')
    let file = e.target.files[0]
    let imgUrl = URL.createObjectURL(file)
    $image.cropper('destroy').attr('src', imgUrl).cropper(options)
  })

  $('#btnUpload').click(function () {
    const dataURL = $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 100,
        height: 100,
      })
      .toDataURL('image/png')
    $.ajax({
      type: 'POST',
      url: '/my/update/avatar',
      data: {
        avatar: dataURL,
      },
      success: res => {
        const { status, message } = res
        layer.msg(message)
        if (status !== 0) return
        window.parent.getUserInfo()
      },
    })
  })
})
